<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <canvas id="arc" width="600" height="600" style="border: 2px solid #00f;"></canvas>
  <canvas id="arc2" width="600" height="600" style="border: 2px solid #00f;"></canvas>

  <script src="../utils/index.js"></script>
  <script>
    const canvas = document.getElementById('arc')
    const ctx = canvas.getContext('2d')
    let ballList = []
    class Ball {
      constructor(x, y, r, xSpeed, ySpeed, color) {
        this.x = x
        this.y = y
        this.r = r
        this.xSpeed = xSpeed
        this.ySpeed = ySpeed
        this.color = color
      }
      drawBall() {
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false)
        ctx.fillStyle = this.color
        ctx.fill()
        return this
      }
      run() {
        if (this.x - this.r <= 0 || this.x + this.r >= canvas.width) {
          this.xSpeed = -this.xSpeed
        }
        this.x += this.xSpeed
        if (this.y - this.r <= 0 || this.y + this.r >= canvas.height) {
          this.ySpeed = -this.ySpeed
        }
        this.y += this.ySpeed
      }
    }

    for (let i = 0; i < 10; i++) {
      let ball = new Ball(r() + 50, r() + 50, r(50), r(14), r(16), Lrt.randomColor1())
      ball.drawBall()
      ballList.push(ball)
    }
    // console.log(ballList)
    const timerId = setInterval(() => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      ballList.forEach(ball => {
        ball.run()
        ball.drawBall()
      })
    }, 10);

    setTimeout(() => {
      clearInterval(timerId)
    }, 60 * 1000);

    function r(n = 1) {
      return Math.random() * n
    }
  </script>

  <script>
    const canvas2 = document.getElementById('arc2')
    const ctx2 = canvas2.getContext('2d')

    let count = 0
    for (let i = 0; i < 30; i++) {
      count++
      drawCircle(count, 20)
    }

    function drawCircle(count, rStep = 1) {
      ctx2.beginPath()
      ctx2.arc(300, 300, rStep * count, 0, Math.PI * 2)
      ctx2.lineWidth = 3
      ctx2.strokeStyle = Lrt.randomColor1()
      ctx2.stroke()
    }
  </script>

</body>

</html>